<template>
  <div>
    <div class="text-box" @click="handleClick">
      {{text}}
    </div>
    <!--对话框显示-->
    <t-modal title="超链接页面" :width="1000" :visible="visible" :switchFullscreen="true" @ok="ok" @cancel="cancel"
             :footer="null">
        <a-card>
          <component
              :is="plug"
              v-if="loadSuccess"
              :tableId="this.tableId"
          ></component>
        </a-card>
    </t-modal>
  </div>
</template>

<script>
  export default {
    name: "HyperlinkPro",
    props: {
      text: {
        type: String,
        default: "超链接"
      },
      url: {
        type: String,
        default: ""
      },
      showType: {
        type: String,
        default: "other"
      },
      tableId: '',
      formType: '',
    },
    data() {
      return {
        visible: false,
        page: null,
        plug: null,
        loadSuccess: false,
        loading: false,
        drawingList: {},
      };
    },
    watch: {},
    methods: {
      handleClick() {
        if (!this.url) {
          this.$message.warning('请选择表单！')
          return
        }
        if (this.showType == 'modal') {
          this.handleModal()
        } else {
          const that = this;
          this.$confirm({
            title: "提示",
            content: "当前页面未保存的数据将丢失，确定要跳转页面吗？",
            okText: "确定",
            cancelText: "取消",
            closable: true,
            icon: () => that.$createElement('a-icon', {
              props: {
                key: 'info',
                type: 'info-circle',
                twoToneColor: '#1890ff'
              }
            }),
            onOk() {
              that.handleWebPage()
            }
          })
        }
      },
      handleModal() {
        if (this.formType == 'normalForm') {
          this.plug = () => import(`@/pages/form/formDefine/index`)
        } else if (this.formType == 'createPage') {
          this.plug = () => import(`@/pages/form/pageDesign/pageView`)
        }
        //判断组件是否加载成功
        this.plug().then(res => {
          this.loadSuccess = true
          this.loading = true
          this.visible = true
        }, reject => {
          this.loadSuccess = false
          this.$message.warning('请填写正确的链接地址！')
        })
      },
      handleWebPage() {
        //跳转至预览页面
        if (this.formType == 'normalForm') {
          this.$router.push({
            path: "/form/formDefine/index?tableUuid=" + this.tableId,
          })
        } else if (this.formType == 'createPage') {
          this.$router.push({
            path: "/form/pageDesign/pageView?tableUuid=" + this.tableId,
          })
        }
      },
      ok() {
        this.visible = false
      },
      cancel() {
        this.visible = false
      },
      getJsonData() {
      }
    }
  };
</script>

<style scoped>
  .text-box {
    color: #1890ff;
    line-height: 1.499;
    position: relative;
    display: inline-block;
    font-weight: 400;
    padding: 0 15px;
  }
</style>
